<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
  </head>
  <style>
    .static {
      width: 150px;
      height: 150px;
      font-size: 40px;
      text-align: center;
      line-height: 150px;
    }
    .a {
      background: firebrick;
    }
    .b {
      border: 20px solid blueviolet;
    }
    .c {
      border-radius: 50%;
    }
    /* .mains {
    } */
    .navs {
      width: 440px;
      display: flex;
      justify-content: space-between;
    }
    .nav {
      width: 100px;
      height: 38px;
      border-radius: 10px;
      text-align: center;
      line-height: 38px;
      background: pink;
      color: #fff;
      cursor: pointer;
    }
    .nav.active {
      background: deeppink;
      color: aquamarine;
    }
    /* .content {
    } */
    .citem {
      width: 440px;
      height: 440px;
      border-radius: 20px;
      color: #f50;
      font-size: 60px;
      background: darkorchid;
      text-align: center;
      line-height: 440px;
      margin-top: 20px;
    }
  </style>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <div v-if="false">
        <div class="static a b c">1</div>
        <div class="static a b" :class="className">2</div>
        <div class="static" :class="clist">3</div>
        <div class="static" :class="{a:flagA,b:flagB}">4</div>
        <div class="static" :class="obj">5</div>
        <div class="static" :class="[isa,isb,'c']">6</div>
        <div class="static" style="background: #f50">7</div>
        <div
          class="static"
          :style="{background: '#f50',color:'blue',borderRadius:'50px'}"
        >
          8
        </div>
        <div class="static" :style="styleobj">9</div>
      </div>
      <div class="mains">
        <div class="navs">
            <div class="nav" @click="changeCurrent(0)" :class="current==0?'active':'' ">情感小说</div>
            <div class="nav" @click="changeCurrent(1)" :class="current==1?'active':'' ">悬疑小说</div>
            <div class="nav" @click="changeCurrent(2)" :class="current==2?'active':'' ">玄幻小说</div>
            <div class="nav" @click="changeCurrent(3)" :class="current==3?'active':'' ">修仙小说</div>
          </div>
        </div>
        <div class="content">
            <div class="citem" :style="{display:current==0?'block':'none'}">情感小说-100</div>
            <div class="citem" :style="{display:current==1?'block':'none'}">悬疑小说-50</div>
            <div class="citem" :style="{display:current==2?'block':'none'}">玄幻小说-30</div>
            <div class="citem" :style="{display:current==3?'block':'none'}">修仙小说-10</div>
        </div>
      </div>
    </div>
    <script>
      const vm = new Vue({
        data: {
          title: "class & style 绑定",
          className: "c",
          clist: "a c ",
          flagA: false,
          flagB: true,
          obj: {
            a: true,
            b: false,
            c: true,
          },
          isa: "a",
          isb: "b",
          styleobj: {
            fontSize: 50,
            color: "#fff",
            borderRadius: "50%",
            backgroundColor: "pink",
          },
          current: 0,
        },
        methods:{
                changeCurrent(index){
                    this.current = index;
                }},
                mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
            }
      }).$mount("#app");
    </script>
  </body>
</html>
